<template>
    <div class="huaxian_wp">
        <div class="tab_title">
            <span>已警列表</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-yujingchufalist')"></i>
        </div>
        <el-table ref="singleTableRef" :data="list" style="
        background-color: #f1f8ff;
                border: 1px solid #979ba2;
               width:calc(100% - 16px);margin: 8px; 
              " @row-click="handRow" :row-class-name="tableRowClassName" :height="188" size="small" border>
            <el-table-column show-overflow-tooltip type="index" label="序号"></el-table-column>
            <el-table-column show-overflow-tooltip prop="heyue_name" label="合约名" width="90"></el-table-column>
            <el-table-column show-overflow-tooltip label="触发时间">
                <template #default="scope">
                    <div>
                        {{
                            moment(scope.row.chufanTime).format("YYYY-MM-DD HH:mm:ss")
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="beizhu" label="备注"></el-table-column>
        </el-table>
        <div class="btns">
            <div>
                <button @click="caozuo(3)">删除</button>
                <button @click="caozuo(4)">清除列表</button>
                <button @click="caozuo(5)">刷新列表</button>
            </div>
        </div>
        <div class="jing_list">
            <el-dialog v-model="isSHowDialog" width="500" destroy-on-close center>
                <template #header>
                    <span class="diao_title">{{ isEdit == 1 ? '添加预警合约' : isEdit == 2 ? '修改预警合约' : '预警合约' }}</span>
                </template>
                <template #footer>
                    <div class="diao_body">
                        <div class="heyue_name">
                            <span>合约名称</span>
                            <select v-model="formData.heyue_bh">
                                <option :value="item.heyue_bh" v-for="item in classHeyue" :key="item.heyue_id">
                                    {{ item.heyue_name }}</option>
                            </select>
                        </div>
                        <div class="list_info">
                            <div class="title">警告设置</div>
                            <div class="list_li">
                                <input type="checkbox" v-model="formData.checkedList" value="1">
                                <span>价格上限1</span>
                                <input class="input_number" type="number" v-model="formData.priceup"
                                    :disabled="!formData.checkedList.some(item => item == 1)">
                            </div>
                            <div class="list_li">
                                <input type="checkbox" v-model="formData.checkedList" value="2">
                                <span>价格上限2</span>
                                <input class="input_number" type="number" v-model="formData.priceup2"
                                    :disabled="!formData.checkedList.some(item => item == 2)">
                            </div>
                            <div class="list_li">
                                <input type="checkbox" v-model="formData.checkedList" value="3">
                                <span>价格下限1</span>
                                <input class="input_number" type="number" v-model="formData.priceDown"
                                    :disabled="!formData.checkedList.some(item => item == 3)">
                            </div>
                            <div class="list_li">
                                <input type="checkbox" v-model="formData.checkedList" value="4">
                                <span>价格下限2</span>
                                <input class="input_number" type="number" v-model="formData.priceDown2"
                                    :disabled="!formData.checkedList.some(item => item == 4)">
                            </div>
                            <div class="list_li">
                                <input type="checkbox" v-model="formData.checkedList" value="5">
                                <span>现手</span>
                                <input class="input_number" type="number" v-model="formData.xianshou"
                                    :disabled="!formData.checkedList.some(item => item == 5)">
                            </div>
                            <div class="list_li">
                                <input type="checkbox" v-model="formData.checkedList" value="6">
                                <span>成交量</span>
                                <input class="input_number" type="number" v-model="formData.volume"
                                    :disabled="!formData.checkedList.some(item => item == 6)">
                            </div>
                            <div class="chu_fa">
                                <span>触发方式</span>
                                <select v-model="formData.chufaStatic">
                                    <option value="1">触发一次</option>
                                    <option value="2">持续预警</option>
                                </select>
                            </div>
                            <div class="bei_zhu">
                                <span>备注</span>
                                <input type="text" v-model="formData.beizhu">
                            </div>
                        </div>
                    </div>
                    <div class="dialog-footer">
                        <button @click="Sumbit(1)">确定</button>
                        <button @click="Sumbit(2)">取消</button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <diao_msg ref="diaoMsg" />
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
const { ipcRenderer } = require('electron');
import moment from 'moment'

import { mainStore } from '@/store/index.js'
import diao_msg from './diao_msg.vue'

import tiaoJianTxt from '@/utils/tiaojiandan.js'

const isSHowDialog = ref(false)
const isEdit = ref(0)
const list = ref([])
const selectInfo = ref(null)
const formData = reactive({})
const diaoMsg = ref(null)
const singleTableRef = ref(null)


const storeMain = mainStore();
const classHeyue = computed(() => {
    let arr = Object.values(storeMain?.classHeyue['外盘']).filter(item => {
        return item.zhu_bz == 1
    })
    return arr;
});

ipcRenderer.on('yujingchufalist_onload', async () => {
    getList()
})
onMounted(() => {
    getList()
})


function caozuo(v) {
    if (v == 1) {
        setFormData()
    }
    if (v == 2) {
        if (!selectInfo.value) {
            diaoMsg.value.open('请选择预警列表');
            return
        }
        setFormData(selectInfo.value)
    }
    if (v == 3) {
        if (!selectInfo.value) {
            diaoMsg.value.open('请选择预警列表');
            return
        }
        let arr = []
        let cont = tiaoJianTxt.readYuJing()
        if (cont) {
            arr = JSON.parse(cont)
        }
        let index = arr.findIndex(item => item.time == selectInfo.value.time)
        if (index != -1) arr.splice(index, 1)

        let idx = list.value.findIndex(item => item.time == selectInfo.value.time)
        if (idx != -1) list.value.splice(index, 1)
        diaoMsg.value.open('删除成功！');
        tiaoJianTxt.writeYuJing(JSON.stringify(arr))
    }
    if (v == 4) {
        diaoMsg.value.open('清除成功！');

        let arr = []
        let cont = tiaoJianTxt.readYuJing()
        if (cont) {
            arr = JSON.parse(cont)
        }
        list.value.forEach(sub => {
            let index = arr.findIndex(item => item.time == sub.time)
            if (index != -1) arr.splice(index, 1)
        })
        list.value = []
        tiaoJianTxt.writeYuJing(JSON.stringify(arr))
    }
    if (v == 5) {
        getList('刷新成功！')
    }
    selectInfo.value = null
    singleTableRef.value?.setCurrentRow()
}
function handRow(v) {
    selectInfo.value = v
}
function tableRowClassName({ row }) {
    return selectInfo.value ? selectInfo.value.time == row.time ? 'selected-row' : '' : ''
}
function Sumbit(v) {
    if (v == 1) {
        if (isEdit.value == 1) {
            list.value.push({ ...formData, time: new Date() - 0, heyue_name: classHeyue.value.find(item => item.heyue_bh == formData.heyue_bh).heyue_name })
            diaoMsg.value.open('添加成功！');
        }
        if (isEdit.value == 2) {
            let index = list.value.findIndex(item => item.time == formData.time)
            list.value[index] = { ...formData, time: new Date() - 0, heyue_name: classHeyue.value.find(item => item.heyue_bh == formData.heyue_bh).heyue_name }
            diaoMsg.value.open('修改成功！');
        }
        tiaoJianTxt.writeYuJing(JSON.stringify(list.value))
    }
    isSHowDialog.value = false
}
function setFormData(v) {
    if (v) {
        isSHowDialog.value = true
        isEdit.value = 2
        Object.keys(v).forEach(item => {
            formData[item] = v[item]
        })
        return
    }
    isSHowDialog.value = true
    isEdit.value = 1
    formData.heyue_bh = classHeyue.value[0].heyue_bh
    formData.heyue_name = ''
    formData.priceup = ''
    formData.priceup2 = ''
    formData.priceDown = ''
    formData.priceDown2 = ''
    formData.xianshou = ''
    formData.volume = ''
    formData.chufaStatic = 1
    formData.chufaNum = 0
    formData.beizhu = ''
    formData.checkedList = []
}

function getList(v) {
    list.value = []
    let cont = tiaoJianTxt.readYuJing()
    if (cont) {
        list.value = JSON.parse(cont).filter(item => item.chufaStatic != 1)
    }
    if (v) {
        diaoMsg.value.open(v);
    }
}

</script>

<style scoped lang="less">
.huaxian_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 265px;
    width: 486px;
    overflow: hidden;

    .tab_title {
        background-color: #d5d8e6;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 30px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 30px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .btn {
        background-color: #0084ff;
        border-radius: 2px;
        color: rgba(255, 255, 255, 0.7);
        display: inline-block;
        line-height: 18px;
        padding: 0 5px;
    }

    .btn2 {
        background-color: #268a2a;
    }

    .btn3 {
        background-color: #ba5c20;
    }

    .btn4 {
        background-color: #e61123;
    }

    .btns {
        padding: 3px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        button {
            width: 70px;
            font-size: 12px;
            line-height: 16px;
            margin-right: 10px;
        }

        button:last-child {
            margin-right: 0;
        }
    }

    .diao_title {
        display: block;
        text-align: left;
        line-height: 25px;
    }

    .jing_list {
        :deep(.el-dialog--center) {
            padding: 0;
            border-radius: 5px 5px;
        }

        :deep(.el-dialog__headerbtn) {
            height: 25px;
            width: 30px;
        }

        :deep(.el-dialog__header.show-close) {
            background-color: #f3f3f3;
            border-radius: 5px 5px 0 0;
            height: 25px;
        }

        :deep(.el-dialog__footer) {
            padding: 0 8px;
        }
    }

    .diao_body {
        text-align: left;

        .heyue_name {
            display: flex;
            align-items: center;
            line-height: 20px;

            span {
                width: 55px;
                font-size: 13px;
            }

            select {
                width: 110px;
                height: 20px;
                font-size: 12px;
            }
        }

        .list_info {
            border: 1px solid #dfdfdf;
            border-radius: 5px;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            margin: 15px 0 0;
            padding-bottom: 10px;

            .title {
                position: absolute;
                background-color: #ffffff;
                top: -8px;
                left: 10px;
            }

            .list_li {
                width: 50%;
                display: flex;
                align-items: center;
                padding: 10px 10px 0;

                .input_number {
                    width: 100px;
                    margin-left: 10px;
                }

                span {
                    width: 55px;
                }
            }

            .chu_fa,
            .bei_zhu {
                width: 100%;
                padding: 10px 10px 0;
                display: flex;
                align-items: center;

                span {
                    width: 77px;
                }

                select {
                    font-size: 12px;
                    height: 23px;
                    width: 100px;
                }
            }
        }
    }

    .dialog-footer {
        text-align: right;
        padding: 8px 0;

        button {
            border: 1px solid #d6d6d6;
            border-radius: 5px;
            background-color: #fdfdfd;
            font-size: 12px;
            width: 70px;
            margin-left: 15px;
            line-height: 20px;
        }
    }
}

:deep(.el-table th.el-table__cell > .cell),
:deep(.el-table td.el-table__cell div) {
    padding: 0 3px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

:deep(.el-table th.el-table__cell.is-leaf),
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    padding: 0;
    color: #000000;
    font-weight: normal;
}

:deep(.el-table th.el-table__cell.is-leaf) {
    background-color: #f0f0f0;
    border-color: #aaaaaa;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    background-color: #f1f8ff;
    border-color: #f0f0f0;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell .cell) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

:deep(.el-scrollbar__bar) {
    display: block !important;
    opacity: 1;
}

:deep(.el-scrollbar__bar.is-horizontal>div) {
    background: #dedfe1;
    opacity: 1;
}

:deep(.el-scrollbar__bar.is-horizontal) {
    height: 5px;
    opacity: 1;
}

:deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar) {
    width: 5px;
    height: 5px;
}

:deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background: #dedfe1;
    border-radius: 5px;
    opacity: 1;
}

:deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
    background: #dedfe1;
    opacity: 1;
}

:deep(.current-row .cell) {
    background-color: #9ecee7;
}

:deep(.el-table--border .el-table__cell) {
    background-color: #f1f8ff;
    padding: 0;
}

:deep(.selected-row td.el-table__cell) {
    background-color: #9ecee7 !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    /* 始终显示箭头 */
}

/* 针对 Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    /* 让箭头始终显示 */
}
</style>
